<template>
  <div class="tree-container">
    <a-tree
      checkable
      :tree-data="treeData"
      :field-names="fieldNames"
      v-model:checkedKeys="checkedKeys"
      @check="selectHandel"
      :selectable="false"
    >
      <template #title="{ title }">
        {{ title }}
      </template>
    </a-tree>
  </div>
</template>
<script setup>
import { onMounted, ref, defineEmits, defineProps, computed } from "vue";
import { microAppRouterList } from "@/api/microApp";
import { message } from "ant-design-vue";
import { formatToMenu } from "@/utils/listToMenu";

const emit = defineEmits(["update:value"]);
const props = defineProps({
  value: {
    type: Array,
    default: () => [],
  },
});

/**
 * 设置选中数据
 */
const checkedKeys = computed(() => {
  return props.value.map((item) => item - 0);
});

const treeData = ref([]);

const fieldNames = {
  children: "children",
  title: "title",
  key: "id",
};

/**
 * 获取树形数据
 */
const microAppRouterListFun = async () => {
  const { success, msg, data } = await microAppRouterList();
  if (success) {
    treeData.value = formatToMenu(data?.rows || []);
  } else {
    treeData.value = [];
    message.error(msg);
  }
};
/**
 * @description 获取菜单数据
 */
microAppRouterListFun();

const selectHandel = (selectedKeys, e) => {
  emit("update:value", selectedKeys);
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.tree-container {
  max-height: 260px;
  overflow: auto;
  height: 260px;
}
</style>
